<template>
	<view class="room">
		<!-- 头部导航 -->
		<view class="w-750 w-bj-white" style="position: fixed; top: 0; left: 0; z-index: 999;">
			<view class="h-100 w-row-justify-between-align">
				<view class="wh-80 w-row-center" @click="routerBack()">
					<image class="wh-40" src="../../../static/gane/goBack-icon.png"></image>
				</view>
				<view class="flex1 h-100 w-row-center w-wz-conts font-36">
					<text>{{typeText[querFrom.type-1]}}</text>
				</view>
				<view class="wh-80 w-row-center">
					<!-- <uni-datetime-picker type="datetimerange" @change="changeTiem">
						<image class="wh-50" src="../../../static/gane/rq.png"></image>
					</uni-datetime-picker> -->
				</view>
			</view>
		</view>
		<view class="bwh-120"></view>
		<!-- 头部导航结束 -->

		<view class="content-box padding-top-xs">
			<view class="cover-tw index-bg absolute-default absolute top-bg">
				<!-- 期数 -->
				<view class="padding-sm padding-top-xs padding-bottom-xs text-color-white number-font">
					<view class="van-row van-row--align-center disflex van-width">
						<view class="van-col van-col--10" style="font-size: 32rpx;">
							{{issueData.next_issue}}期
						</view>
						<view class="van-col van-col--14 disflex" style="justify-content: right;">
							<view class="text-center line-height-xs fl">
								<span>
									<b class="text-bold text-xs">开奖时间: {{issueData.start_time}}</b>
								</span>
							</view>
							<view class="line-height-xs fr margin-left-xs timer-box text-color-black">
								<view class="van-count-down" v-if="endTime">

									<hbxw-count-down v-if="!timeUpShow" :start="startTime" :end="endTime"
										:showMillisecond="true" :interval="100" @end="timeUp()">
										<template #content="{countDown}">
											<span class="text-lg">
												{{countDown.minutes}}
											</span>
											<span class="text-lg">
												{{countDown.seconds}}
											</span>
											<span class="text-lg">
												{{countDown.milliseconds}}
											</span>
										</template>
									</hbxw-count-down>
                  <div v-else-if="timeUpShow" class="disflex">
										<span class="text-lg">
											已
										</span>
                    <span class="text-lg">
											封
										</span>
                    <span class="text-lg">
											盘
										</span>
                  </div>
								</view>
							</view>

						</view>
					</view>
				</view>

				<view class="padding-left-sm padding-right-sm text-color-white number-font">
					<view class="rel open-box padding-left-sm padding-right-sm">
						<view class="cover-tw index-bg open-bg absolute-default absolute">

						</view>

						<view class="van-row van-row--align-center open-result text-center">
							<view class="van-col van-col--7">
								<div v-if="issueData.status==1">{{issueData.issue}}期</div>
								<div v-else>{{issueData.next_issue}}期 <span style="color: #ffff00;">正在出结果</span> </div>
							</view>
							<view class="van-col van-col--17">

								<!-- 开奖 -->
								<!-- <view class="number-font text-default">
									<span v-for="(i,index) in winningNumbers" :key="index" class="car"
										:class="`car-${i}`" :data-text="i">
										{{i}}
									</span>
								</view> -->

								<!-- 正在开奖滚动效果 -->
								<view class="number-font text-default"
									v-if="issueData.status==1 && issueData.bet_array.bet_number.length">
									<span class="car-group" v-for="num in issueData.bet_array.bet_number">
										<ul>
											<li>
												<span class="car" :class="`car-${num}`" :data-text="num">{{num}}</span>
											</li>
										</ul>
									</span>
								</view>
								<view class="number-font text-default" v-else>
									<span class="car-group" v-for="i in 10" :key="i">
										<ul class="number-roller" :class="`number-delay-${i}`">
											<li v-for="index in 10" :key="index">
												<span class="car" :class="`car-${index}`"
													:data-text="index">{{index}}</span>
											</li>
										</ul>
									</span>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="padding-sm padding-top-xs disflex padding-bottom-0 chat-user text-color-white number-font">
					<view class="van-row van-row--align-center disflex van-width">
						<view class="van-col van-col--12 rel disflex">
							<image v-if="userInfo.headimgurl" :src="userInfo.headimgurl" mode="widthFix"
								class="radius-sm avatar fl margin-right-xs"></image>
							<image v-else src="@/static/gane/user.png" mode="widthFix"
								class="radius-sm avatar fl margin-right-xs"></image>
							<span class="line-height-none text-bold" style="transform: translateY(4rpx);">
								余额：{{userMoney}} <br />
							</span>
							<image src="@/static/gane/0.png" mode="widthFix" class="user-ico-game"></image>
						</view>
						<view class="van-col van-col--12">
							<view class="fr wallet">
								<button class="van-button van-button--default van-button--small margin-left-xs"
									@click="toIndex">首页</button>
								<button class="van-button van-button--default van-button--small margin-left-xs"
									@click="routerWallet()">充值</button>
								<button class="van-button van-button--default van-button--small margin-left-xs"
									@click="routerWallet()">提现</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="chat-box padding-left-sm padding-right-sm padding-top-xs envelope"
				:scroll-into-view="lastItemId">
				<view class="fl full-width" v-for="(item,index) in list" :key="index" :id="`item${index}`">
					<view class="cell packet" :class="{'cell-r': item.uid === userInfo.uid}">
						<view class="full-width fl rel">
							<view class="avatar avatar-r">
								<view class="van-image">
									<image :src="item.headimgurl" class="van-image__img"
										v-if="item.headimgurl && item.uid == userInfo.uid"></image>
									<image :src="item.headimgurl" class="van-image__img" v-else-if="item.headimgurl">
									</image>
									<image src="@/static/gane/kefu.jpg" class="van-image__img" v-else-if="!item.uid">
									</image>
									<image src="@/static/gane/user.png" class="van-image__img"
										v-else-if="item.type!='结算报表'"></image>
									<image src="@/static/gane/kefu.jpg" class="van-image__img" v-else>
									</image>
								</view>
							</view>

							<view class="name name-r">
								{{item.nickname}}
								<!-- <div class="tips" v-if="item.uid == userInfo.uid">你</div> -->
							</view>


							<view class="chat-item chat-item-r" style="font-size: 3vw !important;"

								v-html="item.msg"></view>

						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="chat-menu full-width text-center">
			<view class="van-row van-row--align-center">
				<view class="van-col van-col--6" @click="toRecord">
					<button class="van-button van-button--default van-button--small van-button--round">
						<view class="van-button__content">
							<image class="icon" src="@/static/gane/record-icon.png" mode=""></image>
							记录
						</view>
					</button>
				</view>
				<view class="van-col van-col--6" @click="toTrend">
					<button class="van-button van-button--default van-button--small van-button--round">
						<view class="van-button__content">
							<image class="icon" src="@/static/gane/trend-icon.png" mode=""></image>
							走势
						</view>
					</button>
				</view>

				<view class="van-col van-col--6" @click="openRule">
					<button class="van-button van-button--default van-button--small van-button--round">
						<view class="van-button__content">
							<image class="icon" src="@/static/gane/rule-icon.png" mode=""></image>
							规则
						</view>
					</button>
				</view>

				<view class="van-col van-col--6" @click="toIm()">
					<button class="van-button van-button--default van-button--small van-button--round">
						<view class="van-button__content">
							<image class="icon" src="@/static/gane/customer-icon.png" mode=""></image>
							客服
						</view>
					</button>
				</view>
			</view>
		</view>

		<view class="chat-tools">
			<view class="bar">
				<view class="quick  text-center" @click="openBetting">
					快捷<br />
					下注
				</view>
			</view>

			<view class="funbar">
				<input type="text" v-model="input" class="input" placeholder="可输入玩法点数"  @confirm="defineForm()"/>
			</view>
			<view class="send text-center text-color-white" @click="defineForm">
				发送
			</view>

			<image class="keyboardIcon" src="../../../static/gane/keyboard-icon.png" mode="" @click="openKeyboard">
			</image>
		</view>

		<!-- 规则 -->
		<uni-popup ref="RulePopup" type="bottom" border-radius="10px 10px 0 0">
			<view class="gameDetailBox">
				<view class="padding-sm">
					<view class="padding-bottom-sm title max-height">
						【{{typeText[querFrom.type-1]}}玩法介绍】
						<rich-text :nodes="desc"></rich-text>
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeRule"></image>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 快捷键盘 -->
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" class="keyboard-popup">
			<view class="betting">
				<view class="padding-sm pop-bottom">
					<view class=" padding-bottom-sm title margin-bottom-xs">
						快捷输入
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeKeyboard"></image>
					</view>

					<view class="van-row">
						<view class="keyboard-item van-col van-col--3 margin-bottom-xs"
							v-for="(item,index) in keyboardItems" :key="index" @click="updateInput(item)">
							<span class="keybordBtn">{{item}}</span>
						</view>
					</view>
				</view>


			</view>
		</uni-popup>

		<uni-popup ref="betting" type="bottom" border-radius="10px 10px 0 0">
			<view class="betting">
				<view class="padding-sm">
					<view class=" padding-bottom-sm title">
						快捷下注
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeBet"></image>
					</view>
				</view>

				<!-- <view>
					<view class=" padding-bottom-sm title sel">
						选玩法
					</view>
				</view> -->

				<view class="van-tabs van-tabs--line margin-top-xs">
					<view class="van-tabs__wrap">
						<liuyuno-tabs :tabData="tabs" :underLineWidth="100" :activeIndex="defaultIndex"
							@tabClick="tabClick" />
					</view>
				</view>

				<!-- 选赛道 -->
				<view class="items" style="height: auto;">
					<view class="text-default margin-top-sm items-title">
						选赛道
					</view>
					<view class="item " v-for="(item,index) in trackItems" :key="index" @click="selTrackItem(item)"
						:class="{updateItem: item == trackIndex}">
						<view class="label">
							{{item}}
						</view>
					</view>
				</view>

				<!-- 下注 -->
				<view class="items">
					<view class="text-default margin-top-sm items-title">
						{{tabs[defaultIndex].title}}
					</view>
					<view class="item " v-for="(item,index) in tabs[defaultIndex].list" :key="index"
						@click="selItem(item)" :class="{updateItem: includesType(item.number)}">
						<view class="label">
							{{item.number}}
						</view>
						<view class="value">
							x{{item.odds}}
						</view>
					</view>
				</view>

				<view class="submit-bar">
					<view class="van-submit-bar van-safe-area-bottom">
						<view class="van-submit-bar__bar">
							<view class="van-submit-bar__text" style="text-align: left">
								共
								<span class="van-submit-bar__price-integer">{{selList.length}}</span>
								注
							</view>

							<button @click="openSubBet" :disabled="!selList.length"
								class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">下一步</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="subbetting" type="bottom" border-radius="10px 10px 0 0">
			<view class="betting betting-padding-500">
				<view class="padding-sm">
					<view class=" padding-bottom-sm title">
						确认下注金额
						<image class="close-icon" src="@/static/index/close-icon.png" @click="closeSubBet"></image>
					</view>
				</view>

				<view class="van-cell van-field disflex">
					<view class="van-cell__title van-field__label">
						<label for="van-field-4-input">下注金额</label>
					</view>

					<view class="van-cell__value van-field__value">
						<view class="van-field__body">
							<input id="van-field-27-input" type="text" v-model="price" class="van-field__control"
								placeholder="请输入下注金额" />
						</view>
					</view>
				</view>

				<view class="margin-top-sm title-align">
					快速选择
				</view>

				<view class="van-row margin-top-sm">
					<view class="van-col van-col--3 margin-bottom-xs title-align" v-for="(item,index) in priceList"
						:key="index" @click="countPrice(item)">
						<view class="keybordBtn">
							{{item}}
						</view>
					</view>

					<view class="van-col van-col--3 margin-bottom-xs title-align" @click="price = null">
						<view class="keybordBtn">
							清空
						</view>
					</view>
				</view>

				<view class="submit-bar">
					<view class="van-submit-bar van-safe-area-bottom">
						<view class="van-submit-bar__bar">
							<view class="van-submit-bar__text" style="text-align: left">
								共
								<span class="van-submit-bar__price-integer">{{selList.length}}</span>
								注，投注金额<span class="van-submit-bar__price-integer">{{price || 0}}</span>元
							</view>

							<button :disabled="!price || !track" @click="betting()"
								class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">确认下注</button>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import $H from '@/pages/common/request.js'

	import hongbaoicon from '@/static/gane/hongbao.png'
	import hongbaoiconN from '@/static/gane/hongbao-n.png'
	export default {
		data() {
			return {
				hongbaoicon,
				hongbaoiconN,
				typeText: ['极速赛车', '极速飞艇'],
				list: [],
				querFrom: {
					pagenum: 1,
					pagesize: 20,
					roomId: '',
					type: 1,
				},
				roomInfo: {
					room_odds: []
				},
				time: null,
				lastItemId: null,
				activeShow: false,
				priceList: [10, 50, 100, 500, 1000, 5000],
				price: null,
				countdownTime: 1 * 60 * 60 * 60 * 1000,
				numberList: [],
				currentViewId: 'number-0', // 初始滚动到的目标id，先定位到0
				index: 0, // 当前显示数字的索引
				tabs: [],
        selRoom_odds: {},
				defaultIndex: 0,
				items: [{
					label: '大',
					value: 1.98
				}, {
					label: '小',
					value: 1.98
				}, {
					label: '单',
					value: 1.98
				}, {
					label: '双',
					value: 1.98
				}],

				// 赛道
				trackItems: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				trackIndex: null,

				selList: [],

				keyboardItems: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '大', '小', '单', '双', '龙', '虎', '合',
					'和', '.', '/', '空格', '清空', '发送', '←'
				],
				input: '',
				// 开奖号码
				winningNumbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				postData: { //下注
					roomId: 0,
					gameType: 0, //游戏类型
					money: 0, //红包金额
				},
				issueData: {
					bet_array: {
						bet_number: [0, 0, 0],
					}
				},
				lastTime: '',
				room_bettype: '',
				pourData: [],
				startTime: '',
				endTime: '',
				userInfo: {},
				isOpenKeyboard: false,
				timeUpShow: false,
				userMoney: 0,
				timer: null,
				track: null,
				desc: ''
			}
		},
		beforeCreate() {

			const isLoading = localStorage.getItem('isLoading')
			if (!isLoading) {
				uni.showLoading({
					title: '数据加载中',
					mask: true
				});
			}
		},

		onLoad(option) {

			this.querFrom.type = this.postData.gameType = option.type;
			this.room_label = option.room_label;
			this.postData.roomId = option.roomId;
			this.querFrom.roomId = option.roomId;
			this.getRoom();
			this.getUserInfo()

		},

		onUnload() {

			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null

			}
			localStorage.removeItem('isLoading')
		},

		onHide() {
			if (this.timer) {
				clearInterval(this.timer)
				this.timer = null
			}
			localStorage.removeItem('isLoading')
		},
		onShow() {
			this.endTime = ""
			this.getIssueData()
			this.AutoLoadTime();
		},
		methods: {
			AutoLoadTime() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.getIssueData()
				}, 3000);
			},

			getUserInfo() {
				$H.post('/app_user_get_userinfo').then((res) => {
					if (res.code == 200) {
						this.userInfo = res.data

						uni.setStorageSync('UserInfo', res.data)
					}
				})
			},

			getRoom() {
				$H.post('/app_pk10_room_odds', {
					type: this.postData.gameType,
					roomId: this.postData.roomId
				}).then((res) => {
					if (res.code == 200) {
						this.roomInfo = res.data;

						const data = this.roomInfo.room_odds;
						// console.log(this.gameTypeArr,'gameTypeArr')

						const dataArray = Object.keys(data).map(key => {
              if(key!='cailonghu'){
                return {
                  key: key,
                  title: data[key].name,
                  ...data[key]
                };
              }

						});
            console.log(dataArray,'dataArray');
						this.tabs = dataArray;
						this.desc = res.data.desc || ''
						// console.log(this.tabs,'tabs')

						this.room_bettype = dataArray[0].key
						this.items = this.tabs[0].list

					}
				})
			},
			// 更新
			updateList() {
				this.list = [];
				this.getIssueData();
				this.$nextTick(() => {
					this.lastItemId = `item${this.list.length - 1}`;
				});
			},

			// 倒计时结束
			timeUp() {
				this.timeUpShow = true
			},

			getIssueData() {

				$H.post('/pk10_issue_data', {
					'type': this.postData.gameType,
					'room_label': this.room_label,
					'last_time': this.lastTime,
				}).then((res) => {
					if (res.code == 200 && res.data) {
						this.issueData = res.data;
						if (res.data && res.data.last_time) {
							this.lastTime = res.data.last_time;
						}

						this.timeUpShow = res.data.title === '正在进行...'

						this.userMoney = res.data.amoney
						let pourArray = res.data.pour_array
						pourArray.forEach((value) => {
							// console.log(value,'value')
							if (this.list.length == 0) {
								this.list.push(value)
							}
							let result = this.list.find(item => item.id == value.id)
							if (!result) {

								this.list.push(value)
							}

						})
						// console.log(this.list,'this.list')
						this.$nextTick(() => {
							this.lastItemId = `item${this.list.length - 1}`
						})
						this.startTime = this.getNowDate()

						this.endTime = res.data.endTime
						localStorage.setItem('isLoading', true)
						uni.hideLoading();

					}
				})
			},
			getNowDate() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				const hours = String(currentDate.getHours()).padStart(2, '0');
				const minutes = String(currentDate.getMinutes()).padStart(2, '0');
				const seconds = String(currentDate.getSeconds()).padStart(2, '0');
				return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
			},
			tabClick(e) {
        this.pourData =[];
				this.defaultIndex = e
        this.selRoom_odds = this.tabs[e]
				// 切换清空选择数据
				this.selList = []
				if (this.defaultIndex == 2) {
					this.trackItems = [1, 2, 3, 4, 5];
				} else {
					this.trackItems = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
				}
        this.room_bettype = this.selRoom_odds.key

				this.trackIndex = null
				this.track = null;
				// console.log(e,'e')
			},
			openKeyboard() {
				this.$refs.popup.open()
			},

			closeKeyboard() {
				this.$refs.popup.close()
			},

			openRule() {
				this.$refs.RulePopup.open()
			},

			closeRule() {
				this.$refs.RulePopup.close()
			},

			openBetting() {
				this.$refs.betting.open()
			},
			closeBet() {
				this.selList = []
				this.pourData = []
				this.$refs.betting.close()
			},

			openSubBet() {
				this.$refs.subbetting.open()
			},

			closeSubBet() {
				this.$refs.subbetting.close()
			},

			countPrice(num) {
				this.price += Number(num)
			},

			// 快捷输入
			updateInput(item) {
				if (item === '空格') {
					this.input = this.input + ' '
				} else if (item === '清空') {
					this.input = ''
				} else if (item === '发送') {
					// 执行提交接口
				} else if (item === '←') {
					this.input = this.input.substring(0, this.input.length - 1)
				} else {
					this.input = this.input + item
				}

			},

			// 确定发送数据
			defineForm() {
				// if (Number(this.end_time.second) < 0) {
				// 	return uni.showToast({
				// 		title: `${this.issue+1}结束中`,
				// 		duration: 1000,
				// 		icon: 'none'
				// 	});
				// }

				if (this.input == '') {
					return uni.showToast({
						title: '下单内容为空',
						duration: 1000,
						icon: 'none'
					});
				}

				let inputArray = this.input.split("/")

				const arrval = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '大', '小', '单', '双', '龙', '虎'
				]
				// console.log(inputArray, 'inputArray')
				if (inputArray.length < 3 || arrval.includes(inputArray[1])) {
					return uni.showToast({
						title: '下单规则错误',
						duration: 1000,
						icon: 'none'
					});
				}
				if (isNaN(Number(inputArray[inputArray.length - 1]))) {
					return uni.showToast({
						title: '下单金额错误',
						duration: 1000,
						icon: 'none'
					});
				}
				if (inputArray[0] == '' || inputArray[1] == '') {
					return uni.showToast({
						title: '下单号码为空',
						duration: 1000,
						icon: 'none'
					});
				}
				let obj = [{
					number: inputArray[1],
					money: inputArray[2]
				}]
				this.track = inputArray[0]
				// this.money = arr1
				this.submitOrder(obj, 2)
			},

			// 选择数据
			selItem(item) {
				// console.log(item,'item')
				// this.bet_name = item.type_name
				if (this.selList.includes(item.number)) {

					this.selList = this.selList.filter(value => value != item.number)
					const key = this.selList.indexOf(item.number)
					this.pourData.splice(key, 1)
				} else {
					if (this.pourData.length >= 5) {
						return uni.showToast({
							title: '单次下单不能超过5单',
							duration: 1000,
							icon: 'none'
						});
					}
					this.selList = this.selList.includes(item.number) ?
						this.selList.filter(value => value !== item.number) : [...this.selList, item.number];
					// console.log(this.selList,item,'this.selList')

					this.pourData.push(item)
				}

			},

			selTrackItem(index) {
				this.trackIndex = index
				this.track = this.trackItems[this.trackIndex-1];
			},

			// 渲染选中数据
			includesType(id) {
				return this.selList.includes(id)
			},

			updateLastItemId(id) {

			},

			toIm() {
				uni.switchTab({
					url: "/pages/im/imdetails",
				});
			},

			// 下注
			betting() {
				if (!this.track) {
					// console.log(1111)
					return uni.showToast({
						title: '请选择赛道',
						duration: 1000,
						icon: 'none'
					});
				}
				if (!this.price) {
					// console.log(1111)
					return uni.showToast({
						title: '请输入大于0的数字',
						duration: 1000,
						icon: 'none'
					});
				}
				let bet_array = []
				// console.log(this.pourData,'this.pourData')
				this.pourData.forEach((item) => {
					let sortedStr = item.number.toString();

					if (!isNaN(Number(sortedStr)) && isFinite(sortedStr) && typeof sortedStr === 'string' &&
						sortedStr != '10') {
						// 将字符串转换为字符数组
						const charArray = sortedStr.split('');
						// 对字符数组进行排序
						const sortedArray = charArray.sort();

						// 将排序后的字符数组重新组合成一个字符串
						sortedStr = sortedArray.join('');
					}

					bet_array.push({
						number: sortedStr,
						odds: item.odds,
						money: this.price,

					})
				})
				// console.log(bet_array,'bet_array')
				if (bet_array.length > 0) this.submitOrder(bet_array, 1)
			},
			// 提交订单
			submitOrder(bet_array, type) {

				if (this.submitLock) return
				this.submitLock = true
				let typeList = ['jssc', 'jsft']
				const formData = {
					bet_type: type,
					bet_array: bet_array,
					game_type: typeList[this.querFrom.type - 1],
					room_label: this.roomInfo.room_label,
					room_bettype: this.room_bettype,
					type: this.roomInfo.type,
					track: this.track, //赛道
				}
				// console.log(bet_array)
				uni.showLoading({
					title: '下单中',
					mask: false
				});
				// 提交订单
				$H.post('/pk10_user_betpour', formData).then((res) => {
					uni.hideLoading();
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
					if (res.code == 200) {

						this.pourData = []
						this.selList = []
						this.price = null
						this.input = ''
						this.track = ''
						this.closeBet()
						this.closeKeyboard()
						this.closeSubBet()
						this.getIssueData()
						this.getUserInfo()
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						});
					}
				}).finally(() => {
					this.submitLock = false
				})

			},

			toIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},

			toTrend() {
				uni.navigateTo({
					url: '/pages/game/pk10/trend?type=' + this.querFrom.type
				});
			},

			// 记录
			toRecord() {
				const types = ['jssc', 'jsyt']
				// uni.navigateTo({
				// 	url: `/pages/my/record/list?index=3&game_type=${types[this.type - 1]}`
				// });
				uni.navigateTo({
					url: `/pages/my/order/order?game_type=${types[this.querFrom.type - 1]}`
				});
				// uni.navigateTo({
				// 	url: '/pages/my/record/list?index=' + 3
				// });
			},

			// 渲染不同的球体颜色
			getCol(i) {
				const colorList = ['red', 'blue', 'green'];
				const index = Math.floor((i - 1) / 2) % colorList.length;
				return colorList[index]
			}
		},
		mounted() {

		},

		created() {

		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #f0f3ff !important;
		font-size: 3.46667vw;
		color: #535d76;
	}

	.keyboard-popup {
		z-index: 996 !important;
	}

	.pop-bottom {
		padding-bottom: 18.66667vw;
	}

	.room {
		.gameDetailBox {
			padding-bottom: 140rpx;
			background-color: #fff;
			font-size: 24rpx !important;
			color: #535d76;
			line-height: 50rpx;

			.title {
				position: relative;
				padding-right: 60rpx;

				.close-icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 0;
					margin-top: 10rpx;
					right: 0;
				}
			}
		}

		.open-bg {
			background-image: url('@/static/gane/open-bg.png') !important;
		}

		.open-result {
			height: 14.13333vw;
		}

		.number-font {
			.car-group {
				width: 5.6vw;
				height: 5.6vw;
				line-height: 5.86667vw;
				font-size: 3.46667vw;
				display: inline-block;
				border-radius: 1.06667vw;
				color: #fff;
				margin-left: 1px;
				transform: translateY(.53333vw);
				overflow: hidden;
			}

			.car {
				width: 5.6vw;
				height: 5.6vw;
				line-height: 5.86667vw;
				font-size: 3.46667vw;
				display: inline-block;
				border-radius: 1.06667vw;
				color: #fff;
				margin-left: 1px;
				transform: translateY(-.53333vw);
				position: relative;

				&:before {
					content: attr(data-text);
					position: absolute;
					-webkit-text-stroke: .4vw #333;
					z-index: -1;
				}
			}

			.car-1 {
				background-color: #fffe54;
			}

			.car-2 {
				background-color: #4089f7;
			}

			.car-3 {
				background-color: #4d4d4d;
			}

			.car-4 {
				background-color: #eb7b30;
			}

			.car-5 {
				background-color: #a5fcfe;
			}

			.car-6 {
				background-color: #4b20f5;
			}

			.car-7 {
				background-color: #b8b8b8;
			}

			.car-8 {
				background-color: #e73323;
			}

			.car-9 {
				background-color: #6a110a;
			}

			.car-10 {
				background-color: #63be38;
			}


			.number-delay-1 {
				animation-delay: .3s;
			}

			.number-delay-2 {
				animation-delay: .6s;
			}

			.number-delay-3 {
				animation-delay: .9s;
			}

			.number-delay-4 {
				animation-delay: 1.2s;
			}

			.number-delay-5 {
				animation-delay: 1.5s;
			}
		}

		.timer-box {
			font-family: LcdD;

			.text-lg {
				font-size: 30rpx;
				text-indent: -.8vw;
				width: 11.2vw;
				height: 9.6vw;
				line-height: 8.53333vw;
				position: relative;
				text-align: center;
				margin-right: -1.33333vw;
				font-weight: 500;
				float: left;
				background-image: url('@/static/gane/countdown-bg.png');
				background-repeat: no-repeat;
				background-size: 100%;
			}
		}

		.betting-padding-500 {
			padding-bottom: 500rpx;
		}

		.betting {
			// padding-bottom: 500rpx;
			background-color: #fff;

			.items {
				height: 500rpx;
				overflow-y: scroll;
				display: flex;
				flex-wrap: wrap;
				align-content: baseline;

				.items-title {
					width: 100%;
					text-align: center;
					padding-bottom: 20rpx;
				}

				.item {
					margin: 9rpx;
					text-align: center;
					color: #F4AF00;
					line-height: 1.4;
					height: 80rpx;
					border: 1px solid #F4AF00;
					border-radius: 10rpx;
					flex: 0 0 calc(25% - 24rpx);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.label {
						color: #666;
					}

					/* 每个元素占据一行宽度的25%（4个元素一行），减去 margin 所占空间 */
				}

				.updateItem {
					background-color: #F4AF00;
					color: #fff !important;

					.label {
						color: #fff !important;
					}
				}


			}

			color: #535d76;
			line-height: 50rpx;

			.keyboard-item {
				.keybordBtn {
					width: 9.33333vw;
					height: 9.33333vw;
					line-height: 9.33333vw;
					display: inline-block;
					border-radius: 1.06667vw;
					background-color: #e4e4e4;
					text-align: center;
				}
			}

			.title {
				text-align: center;
				position: relative;
				padding: 0 60rpx;
				font-size: 30rpx !important;

				.close-icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 0;
					margin-top: 10rpx;
					right: 0;
				}
			}

			.sel {
				&:before {
					content: '';
					position: absolute;
					bottom: -10rpx;
					left: 0;
					z-index: 1;
					width: 10.66667vw;
					height: .8vw;
					background: #F4AF00;
					border-radius: .8vw;
					transform: translateX(375rpx) translateX(-50%);
					transition-duration: 0.3s;
				}
			}

			.quickItem {
				background-color: #fff !important;
				color: #F4AF00 !important;
			}

			.active {
				background-color: #F4AF00 !important;
				color: #fff !important;
			}

			.van-field__label {
				margin-bottom: 0;
			}

			.submit-bar {
				position: fixed;
				bottom: -1px;
				left: 0px;
				right: 0px;
				height: 14.93333vw;
				background-color: #fff;
				border-top: 1px solid #f4f4f4;
				z-index: 6500;

				.van-submit-bar__bar {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					height: 13.33333vw;

					padding: 0 4.26667vw;
					font-size: 3.73333vw;

					.van-submit-bar__text {
						flex: 1;
						line-height: 13.33333vw;
						padding-right: 3.2vw;
						color: #323233;

					}
				}
			}
		}

		::v-deep .uni-popup {
			z-index: 1000;
		}

		.w-row-center {
			color: #323233 !important;
			font-weight: 600;
			font-size: 4.26667vw;
		}

		.bwh-120 {
			background-color: #f0f3ff !important;
		}

		.content-box {
			height: calc(100% - 26.93333vw);
			position: fixed;
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;
			overflow-x: hidden;
			overflow-y: auto;
			z-index: 1;
			padding-bottom: 3.2vw;
			bottom: 14.13333vw;
			top: 12.8vw;

			.chat-user {
				.avatar {
					width: 8.53333vw;
					transform: translateY(.53333vw);
					background-color: transparent;
				}
			}

			.index-bg {
				background-image: url('@/static/gane/header-bg.png');
				background-repeat: no-repeat;
				background-size: 100% auto;
				// height: 14.66667vw;
			}

			.van-button {
				padding: 0 4vw;
				height: 6.93333vw !important;
				line-height: 6.93333vw !important;
				background-color: #fffc;
				font-size: 3.2vw;
				color: #323233;
			}



			.chat-box {
				width: 100%;
				position: absolute;
				top: 42.66667vw;
				bottom: 16.8vw;
				left: 0px;
				right: 0px;
				overflow-y: scroll;
				overflow-x: hidden;

				.cell {
					width: 100%;
					float: left;
					position: relative;
					margin-bottom: 4vw;
				}
			}

			// .envelope {
			// 	top: 16vw;
			// }

			.name {
				font-size: 3.2vw;
				color: #a5a5a5;
				width: calc(100% - 15.46667vw);
				float: right;
				line-height: 5.33333vw;
			}

			.small {
				width: 11.46667vw;
				height: 4.26667vw;
				transform: translateY(.8vw);
			}

			.vip-tag {
				background-repeat: no-repeat;
				background-size: auto 100%;
				display: inline-block;
			}

			.open {
				background-color: #fce1c3 !important;

				&::after {
					color: #fce1c3 !important;
				}
			}

			.chat-item {
				font-size: 4.26667vw;
				min-width: 16vw;
				max-width: 67%;
				background-color: #fff;
				line-height: 5.33333vw;
				padding: 3.46667vw 4vw;
				border-radius: 1.6vw;
				word-wrap: break-word;
				word-break: break-all;
				margin: 0 0 0 3.2vw;
				float: left;
				position: relative;
				// min-height: 12.26667vw;

				&::after {
					color: #fff;
					content: "\25c6";
					position: absolute;
					top: 3.46667vw;
					left: -2.13333vw;
					font-size: 5.33333vw;
					line-height: 5.33333vw;
				}

				.hongbao {
					width: 12vw;
					height: 100rpx;
					float: left;
				}

				.info {
					margin-left: 14.13333vw;
					color: #fff;
					text-shadow: 0 0 1px rgba(0, 0, 0, .1);

					& span:nth-child(2) {
						float: right;
					}
				}

				.bar {
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					height: 5.86667vw;
					line-height: 5.86667vw;
					font-size: 3.2vw;
					padding: 0 2.66667vw;
					border-radius: 0 0 1.6vw 1.6vw;

					&::before {
						content: "";
						position: absolute;
						top: 0px;
						left: 2.66667vw;
						right: 2.66667vw;
						border-top: 1px solid rgba(255, 255, 255, .6)
					}

					b {
						position: relative;
						float: left;
						transform: scale(.9);
						color: #fff9;
					}

				}
			}

		}

		.chat-menu {
			position: fixed;
			right: 0px;
			bottom: 15.46667vw;
			height: 10.66667vw;
			z-index: 5;
			background-color: #f7f8fd;
			line-height: 6.4vw;
			padding-top: 1.33333vw;

			.van-button--round {
				padding: 0px 4vw;
			}

			.van-button__content {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;

				.icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.chat-tools {
			position: fixed;
			left: 0px;
			bottom: 0px;
			height: 15.46667vw;
			z-index: 1001;
			background-color: #f7f8fd;
			display: flex;
			align-items: center;
			width: 100%;
			z-index: 998;

			.bar {
				margin-left: 3.2vw;
			}

			.quick {
				width: 11.2vw;
				height: 11.2vw;
				padding: .5vw 0 0;
				color: #678cf0;
				border: 1px solid #acbbe2;
				background: url();
				border-radius: 1.06667vw;
			}

			.funbar {
				width: 0;
				flex: 1;
				background-color: #fff;
				border-radius: 1.06667vw;
				height: 11.2vw;
				line-height: 11.2vw;
				text-align: center;
				font-size: 4.26667vw;
				margin-left: 3.2vw;

				.input {
					width: 100%;
					height: 100%;
					text-align: left;

					.input-placeholder {
						color: #969799;
					}
				}
			}

			.active {
				width: calc(100% - 32.53333vw);
			}

			.send {
				width: 140rpx;
				height: 9.06667vw;
				line-height: 9.06667vw;
				padding: 0;
				margin-top: 1.06667vw;
				background: #07c160;
				border-radius: 1.06667vw;
				margin: 0 3.2vw;
			}

			.keyboardIcon {
				width: 64rpx;
				height: 64rpx;
				margin-right: 3.2vw;
			}
		}
	}

	.scroll-container {
		width: 9.33333vw;
		height: 9.33333vw;
		margin: 0 auto;
		overflow: hidden;
	}

	::v-deep .van-tabs__wrap {
		background-color: transparent;

		._item {
			justify-content: center !important;
			text-align: center !important;
		}
	}

	.number-roller {
		animation: roller 1s linear infinite;
		transform: translateY(.53333vw);
	}
	
	.cell-r {
		float: right !important;
		padding-right: 8vw !important;
	
		.avatar-r {
			float: right !important;
		}
	
		.name-r {
			display: flex;
			justify-content: right !important;
			float: left !important;
		}
	
		.chat-item-r {
			margin: 0 3.2vw 0 0 !important;
			float: right !important;
	
			&::after {
				right: -2.13333vw !important;
				left: auto !important;
			}
		}
	}

	.number-delay-1 {
		animation-delay: .2s;
	}

	.number-delay-2 {
		animation-delay: .4s;
	}

	.number-delay-3 {
		animation-delay: .6s;
	}

	.number-delay-4 {
		animation-delay: .8s;
	}

	.number-delay-5 {
		animation-delay: 1s;
	}

	.number-delay-6 {
		animation-delay: 1.2s;
	}

	.number-delay-7 {
		animation-delay: 1.4s;
	}

	.number-delay-8 {
		animation-delay: 1.6s;
	}

	.number-delay-9 {
		animation-delay: 1.8s;
	}

	.number-delay-10 {
		animation-delay: 2s;
	}

	@keyframes roller {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-100%);
		}
	}
</style>